<template>
  <div class="box">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <!-- <el-input v-model="ruleForm.tableData.num"></el-input> -->
      <el-button class="addBtn" type="primary" @click="addRow(ruleForm.tableData)" size="small" style="margin-bottom:10px;">增加</el-button>

      <el-table :data="ruleForm.tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="80"></el-table-column>
        <el-table-column label="电话" align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.tel'" :rules="rules.tel">
              <el-input v-model="scope.row.tel" @input="aa" :disabled="!scope.row.disabled"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules="rules.address">
              <el-input v-model="scope.row.address" :disabled="!scope.row.disabled"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="密码" align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.password'" :rules="rules.password">
              <el-input :type="scope.row.type" v-model="scope.row.password" :disabled="scope.row.passdisabled">
                <i slot="suffix" v-if="scope.row.showindex" class="el-icon-view" @click="onSearch(scope.row)"></i>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- 此处省略了一些按钮代码，后面会讲到-->

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.edit" type="success" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row,'ruleForm')">保存
            </el-button>
            <el-button v-else type="primary" size="mini" @click="startEdit(scope.row)">编辑
            </el-button>
            <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, ruleForm.tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" align="center" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total=" ruleForm.tableData.length">
      </el-pagination>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "test2",
  data() {
    return {
      show: false,
      typePwd: 'password',
      //表格数据
      ruleForm: {
        num: 0,
        tableData: [
          {
            tel: "13693181652",
            address: "江苏省南京市雨花区",
            password: '123466',
            type: 'password',
            edit: false,
            disabled: false,
            passdisabled: true,
            showindex: false,
          },
          {
            tel: "13664428500",
            address: "江苏省南京市江宁区",
            password: '15951705',
            type: 'password',
            edit: false,
            disabled: false,
            passdisabled: true,
            showindex: false
          }
        ]
      },
      rules: {
        tel: [{ required: true, message: '请输入手机号码', trigger: 'change' },
        {
          validator: function (rule, value, callback) {
            if (/^1[34578]\d{9}$/.test(value) == false) {
              callback(new Error("请输入正确的手机号"));
            } else {
              callback();
            }
          }, trigger: 'blur'
        }],
        address: [{ required: true, message: '请输入用户名', trigger: 'change' },
        { pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' },
        { min: 5, max: 25, message: '长度在 5 到 25个字符' }]
      },
      // 分页
      currentPage: 1, // 当前页码
      pageSize: 3 // 每页的数据条数
    };
  },
  watch: {
    'ruleForm.tableData.num': {
      handler: function (newVal, Val) {
        //  console.log(val,newVal);
        if (val == 100) {
          this.show = true
        } else {
          this.show = false
        }
      },
    }
  },
  mounted() {

  },
  methods: {
    onSearch(row) {
      row.type = row.type === 'password' ? 'text' : 'password';
    },
    //删除
    handleDelete(index, row) {
      this.$confirm('是否删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.splice(index, 1);
        this.$message({
          message: "已删除!",
          type: "success"
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    aa(e) {
      if (e == 100) {
        this.show = true
      } else {
        this.show = false
      }
    },
    // 编辑
    startEdit(row) {
      // console.log(row.tel);

      // row.address=''
      // console.log(row);
      row.edit = !row.edit;
      row.disabled = true;

      //  console.log(this.buttonshow);
    },

    // 保存
    confirmEdit(row, formName) {
      // console.log(row);
      // row.edit = false;
      // row.disabled = false;
      // row.originalValue = row.address;
      if (row.tel == null && row.address == null && row.password == null) {
        this.$message.error('输入不能为空');
      } else if (row.tel == null) {
        this.$message.error('电话不能为空');
      } else if (row.address == null) {
        this.$message.error('地址不能为空');
      } else if (row.password == null) {
        this.$message.error('密码不能为空');
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$message({
              message: "已保存",
              type: 'success'
            })
            row.edit = false;
            row.disabled = false;
            row.passdisabled = true;
            row.originalValue = row.address;
          } else {
            this.$message.error('有信息不正确');
            return false;
          }
        });
      }
    },
    // 取消
    cancelEdit(row) {
      console.log(row);
      if (row.tel == null && row.address == null && row.password == null) {
        this.$message.error('输入不能为空');
      } else {
        // console.log(row);
        // this.tel=row.tel
        // this.address=row.address
        row.tel = null,
          row.address = null
        row.password = null
        this.$message({
          message: "已取消编辑!",
          type: "warning"
        });
      }
      // row.address = row.originalValue;
      // row.edit = false;
      // row.disabled = false;

      // if (row.id === undefined) {
      //   // 重新加载该页面
      // }
    },
    // 增加行
    addRow(row) {
      // console.log(row);
      // if( this.ruleForm.tableData.some(r=>{
      //   console.log(r.disabled);
      // }))
      if (this.ruleForm.tableData.some(r => r.disabled == true)) {
        this.$message.error('在编辑中不可添加');
      } else {
        let newLine = {
          tel: this.tel,
          address: this.address,
          password: this.password,
          edit: true, // 新增时处于可编辑状态，所以按钮是保存和取消
          disabled: true, // 打开编辑状态
          passdisabled: false,//打开密码编辑状态,
          showindex: true,//图标显示,
          type: 'password'
        };
        // console.log(row);
        this.ruleForm.tableData.unshift(newLine);
        // console.log();
      }

    },
    //表格分页
    //列表分页
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
input[disabled],
input:disabled,
input.disabled {
  color: #000000;
  -webkit-text-fill-color: #000000;
  -webkit-opacity: 1;
  opacity: 1;
  font-weight: 900;
}
.box {
  padding: 20px;
}
.box .addBtn {
  float: right;
}
</style>